// 响应式设计工具类

export const breakpoints = {
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px'
}

export const mediaQueries = {
  xs: `(max-width: ${breakpoints.xs})`,
  sm: `(max-width: ${breakpoints.sm})`,
  md: `(max-width: ${breakpoints.md})`,
  lg: `(max-width: ${breakpoints.lg})`,
  xl: `(max-width: ${breakpoints.xl})`,
  xxl: `(max-width: ${breakpoints.xxl})`,

  minXs: `(min-width: ${breakpoints.xs})`,
  minSm: `(min-width: ${breakpoints.sm})`,
  minMd: `(min-width: ${breakpoints.md})`,
  minLg: `(min-width: ${breakpoints.lg})`,
  minXl: `(min-width: ${breakpoints.xl})`,
  minXxl: `(min-width: ${breakpoints.xxl})`,

  smOnly: `(min-width: ${breakpoints.sm}) and (max-width: ${breakpoints.md})`,
  mdOnly: `(min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg})`,
  lgOnly: `(min-width: ${breakpoints.lg}) and (max-width: ${breakpoints.xl})`,
  xlOnly: `(min-width: ${breakpoints.xl}) and (max-width: ${breakpoints.xxl})`
}

// 获取当前断点
export const getCurrentBreakpoint = (): string => {
  const width = window.innerWidth

  if (width < 480) return 'xs'
  if (width < 576) return 'sm'
  if (width < 768) return 'md'
  if (width < 992) return 'lg'
  if (width < 1200) return 'xl'
  return 'xxl'
}

// 检查是否为移动设备
export const isMobile = (): boolean => {
  return getCurrentBreakpoint() === 'xs' || getCurrentBreakpoint() === 'sm'
}

// 检查是否为平板设备
export const isTablet = (): boolean => {
  return getCurrentBreakpoint() === 'md'
}

// 检查是否为桌面设备
export const isDesktop = (): boolean => {
  return getCurrentBreakpoint() === 'lg' || getCurrentBreakpoint() === 'xl' || getCurrentBreakpoint() === 'xxl'
}

// 检查是否为大屏幕
export const isLargeScreen = (): boolean => {
  return getCurrentBreakpoint() === 'xl' || getCurrentBreakpoint() === 'xxl'
}

// 响应式值配置
export const responsiveValues = {
  // 字体大小
  fontSize: {
    xs: {
      title: '20px',
      subtitle: '16px',
      body: '14px',
      caption: '12px'
    },
    sm: {
      title: '22px',
      subtitle: '18px',
      body: '14px',
      caption: '12px'
    },
    md: {
      title: '24px',
      subtitle: '18px',
      body: '14px',
      caption: '12px'
    },
    lg: {
      title: '26px',
      subtitle: '20px',
      body: '16px',
      caption: '14px'
    },
    xl: {
      title: '28px',
      subtitle: '22px',
      body: '16px',
      caption: '14px'
    },
    xxl: {
      title: '32px',
      subtitle: '24px',
      body: '18px',
      caption: '16px'
    }
  },

  // 间距
  spacing: {
    xs: {
      xs: '4px',
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '20px',
      xxl: '24px'
    },
    sm: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '20px',
      xl: '24px',
      xxl: '28px'
    },
    md: {
      xs: '8px',
      sm: '12px',
      md: '16px',
      lg: '24px',
      xl: '32px',
      xxl: '40px'
    },
    lg: {
      xs: '8px',
      sm: '12px',
      md: '20px',
      lg: '28px',
      xl: '40px',
      xxl: '48px'
    },
    xl: {
      xs: '12px',
      sm: '16px',
      md: '24px',
      lg: '32px',
      xl: '48px',
      xxl: '56px'
    },
    xxl: {
      xs: '16px',
      sm: '20px',
      md: '28px',
      lg: '40px',
      xl: '56px',
      xxl: '64px'
    }
  },

  // 布局
  layout: {
    container: {
      xs: '100%',
      sm: '540px',
      md: '720px',
      lg: '960px',
      xl: '1140px',
      xxl: '1320px'
    },
    sidebar: {
      xs: '200px',
      sm: '220px',
      md: '240px',
      lg: '260px',
      xl: '280px',
      xxl: '300px'
    },
    header: {
      xs: '56px',
      sm: '60px',
      md: '64px',
      lg: '64px',
      xl: '64px',
      xxl: '64px'
    }
  },

  // 网格列数
  grid: {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 4,
    xxl: 6
  },

  // 卡片列数
  cardColumns: {
    xs: 1,
    sm: 2,
    md: 2,
    lg: 3,
    xl: 3,
    xxl: 4
  }
}

// 获取响应式值
export const getResponsiveValue = <T>(
  values: Record<string, T>,
  defaultValue?: T
): T => {
  const breakpoint = getCurrentBreakpoint()
  return values[breakpoint] || values.lg || defaultValue || values.md || Object.values(values)[0]
}

// 响应式 CSS 类生成器
export const responsiveClasses = {
  // 显示/隐藏
  display: {
    hidden: (breakpoint?: string) => {
      if (!breakpoint) return 'hidden'
      return `hidden-${breakpoint}`
    },
    block: (breakpoint?: string) => {
      if (!breakpoint) return 'block'
      return `block-${breakpoint}`
    }
  },

  // Flex 布局
  flex: {
    col: (breakpoint?: string) => {
      if (!breakpoint) return 'flex-col'
      return `flex-col-${breakpoint}`
    },
    row: (breakpoint?: string) => {
      if (!breakpoint) return 'flex-row'
      return `flex-row-${breakpoint}`
    }
  },

  // 文本对齐
  text: {
    left: (breakpoint?: string) => {
      if (!breakpoint) return 'text-left'
      return `text-left-${breakpoint}`
    },
    center: (breakpoint?: string) => {
      if (!breakpoint) return 'text-center'
      return `text-center-${breakpoint}`
    },
    right: (breakpoint?: string) => {
      if (!breakpoint) return 'text-right'
      return `text-right-${breakpoint}`
    }
  }
}

// 触摸设备检测
export const isTouchDevice = (): boolean => {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
}

// 移动端适配工具
export const mobileAdaptation = {
  // 调整表格为卡片视图
  tableToCard: (breakpoint: string = 'md'): boolean => {
    return ['xs', 'sm'].includes(breakpoint)
  },

  // 调整网格布局
  gridColumns: (totalColumns: number, breakpoint: string): number => {
    const maxColumns = responsiveValues.grid[breakpoint as keyof typeof responsiveValues.grid]
    return Math.min(totalColumns, maxColumns)
  },

  // 调整卡片布局
  cardColumns: (breakpoint: string): number => {
    return responsiveValues.cardColumns[breakpoint as keyof typeof responsiveValues.cardColumns]
  },

  // 调整表单布局
  formLayout: (breakpoint: string): 'vertical' | 'horizontal' => {
    return ['xs', 'sm'].includes(breakpoint) ? 'vertical' : 'horizontal'
  },

  // 调整分页大小
  pageSize: (currentSize: number, breakpoint: string): number => {
    if (['xs', 'sm'].includes(breakpoint)) {
      return Math.min(currentSize, 10)
    }
    return currentSize
  }
}

// 防抖函数
export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout | null = null

  return (...args: Parameters<T>) => {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

// 节流函数
export const throttle = <T extends (...args: any[]) => any>(
  func: T,
  limit: number
): ((...args: Parameters<T>) => void) => {
  let inThrottle: boolean = false

  return (...args: Parameters<T>) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

// 监听窗口大小变化
export const useBreakpoint = () => {
  // 注意：此函数需要在 Vue 组件中使用，需要手动导入 Vue 的组合式 API
  // import { ref, onMounted, onUnmounted, readonly } from 'vue'
  if (typeof ref === 'undefined') {
    throw new Error('useBreakpoint must be used in a Vue component with Vue 3 imports')
  }
  const { ref: vueRef, onMounted: vueOnMounted, onUnmounted: vueOnUnmounted, readonly: vueReadonly } = (globalThis as any).__vue_composables || {

  const currentBreakpoint = ref<string>(getCurrentBreakpoint())
  const isMobileDevice = ref<boolean>(isMobile())
  const isTabletDevice = ref<boolean>(isTablet())
  const isDesktopDevice = ref<boolean>(isDesktop())

  const updateBreakpoint = () => {
    const newBreakpoint = getCurrentBreakpoint()
    if (newBreakpoint !== currentBreakpoint.value) {
      currentBreakpoint.value = newBreakpoint
      isMobileDevice.value = isMobile()
      isTabletDevice.value = isTablet()
      isDesktopDevice.value = isDesktop()
    }
  }

  onMounted(() => {
    window.addEventListener('resize', debounce(updateBreakpoint, 100))
  })

  onUnmounted(() => {
    window.removeEventListener('resize', debounce(updateBreakpoint, 100))
  })

  return {
    currentBreakpoint: readonly(currentBreakpoint),
    isMobileDevice: readonly(isMobileDevice),
    isTabletDevice: readonly(isTabletDevice),
    isDesktopDevice: readonly(isDesktopDevice)
  }
}

// 响应式组合式函数
export const useResponsive = () => {
  const { currentBreakpoint, isMobileDevice, isTabletDevice, isDesktopDevice } = useBreakpoint()

  const getValue = <T>(values: Record<string, T>, defaultValue?: T): T => {
    return getResponsiveValue(values, defaultValue)
  }

  const shouldShow = (breakpoints: string[]): boolean => {
    return breakpoints.includes(currentBreakpoint.value)
  }

  const shouldHide = (breakpoints: string[]): boolean => {
    return !breakpoints.includes(currentBreakpoint.value)
  }

  return {
    currentBreakpoint,
    isMobileDevice,
    isTabletDevice,
    isDesktopDevice,
    getValue,
    shouldShow,
    shouldHide
  }
}